<template>
  <div class="banner">
    <el-carousel id="myCarousel"
                :autoplay="autoplay"
                :interval="interval"
                :initial-index="initialIndex"
                indicator-position="none"
                ref="carousel"
                @change="onChange">
        <el-carousel-item v-for="(item, index) in carouselList" :key="index" name="index">
            <!-- :playback-rates="[0.7, 1.0, 1.5, 2.0]" 几倍速-->
            <!-- crossorigin="anonymous" 可设置跨域属性-->
            <video-player 
                class="video-player vjs-big-play-centered"
                :src="src"
                ref="playerRef"
                playsinline
                autoplay="true"
                muted
                controls
                :volume="0.6"
                @ended="onPlayerEnded($event)"
                @loadeddata="onPlayerLoadeddata($event)" />
        </el-carousel-item>
    </el-carousel>
    <!-- 下方文字指示器组 -->
    <!-- <div class="indicators-wrapper" >
            <div v-for="(item, index) in carouselList" :key="index" class="indicator-item" :class="{ 'active': initialIndex === index }">
                <span class="indicator-text">{{ item.text }}</span>
            </div>
        </div> -->
  </div>
</template>
 
<script lang="ts" setup>
import { ref, onMounted } from "vue"

const carouselList=ref([
{ id: 1, url: require('../components/img/video1.mp4'), text: '烘焙车间' },
{ id: 2, url: require('../components/img/video2.mp4'), text: '面点车间' },
{ id: 3, url: require('../components/img/video1.mp4'), text: '烘焙车间' },
{ id: 4, url: require('../components/img/video2.mp4'), text: '面点车间' },
])
const playerRef = ref()
const src = ref('')
//可打印出当前所触发的事件
const autoplay = ref(true)
const interval = ref(3000)
const initialIndex = ref(0)
const duration = ref(0)
const carousel=ref()


function onPlayerLoadeddata(player) {
  // 获取资源总时长
  duration.value = player.target.player.cache_.duration;
}
//监听媒体是否已到达结尾，播放完
function onPlayerEnded(player) {
  autoplay.value = true
  interval.value = 3000
  next()
}
// 监听轮播图改变
function onChange(index) {
  src.value = carouselList.value[index].url //视频赋值
  interval.value = duration.value * 1000;
  autoplay.value = false;
  initialIndex.value = index; 
}

const next = () =>{
    carousel.value.next();
}

onMounted(()=>{
  onChange(0)
})
</script>
 
<style lang="less" scoped>
:deep(.el-carousel--horizontal){
  height: 100%; 
}
:deep(.el-carousel__container){
  height: 98%; 
}

.banner{
  height:343px;
  width:712px;
  background: url('../components/img/center-container.png') no-repeat;
  background-size: 100% 100%;
  transform: matrix(1, 0, 0, 1, 1, 0);
  transition-duration: 0ms;
}

.video-player {
  width: 98%;
  margin: 1%;
  height: 98%;
}

.indicators-wrapper{
    height:18%;
    width:98%;
    margin:0 1% 2%;
    display:flex;
    background:#0b2545;
    color:#fff;
    border-bottom-left-radius:10px;
    border-bottom-right-radius:10px;
    .indicator-item{
      flex:1;
      height:100%;
      display:flex;
      align-items:center;
      justify-content:center;
      background:rgba(0,0,0,0.5);
      &.active{
          background:#1296db;
      }
  }
}
</style>